<template>
	<div class="index">
		<div class="header">
			<span class="logo"><img style="width: 1.5rem;margin: .25rem .32rem;" src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/logo_1.png" @click="zhuye()"/></span>
			<div class="seach-box" @click="seachStuta==true&&seachbtn()">
				<i class="seachimg"><img style="width: .24rem;margin-left: 1.51rem;margin-right: .13rem;float: left;margin-top: .19rem;" src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/icon_search@2x.png"/></i>
				<span v-show="seachshow">搜索商品</span>
				<form action="javascript:;" v-show="seachinput">
					<input type="search" name="" id="seach" value="" v-model="seachvalue" placeholder="搜索商品" @keyup.enter="seachsend" autofocus="autofocus" />
				</form>
	
			</div>
			<router-link :to="nt_user!=0?'/informationlist':'/login'" class="xiaoxi" v-show="!seachrmshow"><img style="width: .44rem;" src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/shouye/xiaoxi.png" /><span id="xmessage"></span></router-link>
			<span class="qxsousuo dasousuo" v-show="seachrmshow" @click="seachremove()">取消</span>
		</div>
		<div class="cyds">
			
			
			<div class="cyds-top"></div>
			<div class="cyds-nr">
				<div class="cyds-ls" style="margin-top: 40px;width: 100%;height: 0.7rem;line-height: 0.7rem;margin-left: 0.6rem;">
					<p style="font-size: 25px;float: left;">学校</p>
					<p style="float: left;margin-left: 45px;margin-top: -0.1rem;">
						<Select v-model="xuexiao" size="large" style="width:4rem;border: 3px solid #000000;">
					        <Option value="1">黑龙江佳木斯大学</Option>
					        <Option value="2">浙江大学</Option>
					        <Option value="3">江西九江大学</Option>
					    </Select>
					</p>
				</div>
				
				<div class="cyds-ls" style="margin-top: 40px;width: 100%;height: 0.7rem;margin-left: 0.6rem;">
					<p style="font-size: 25px;float: left;">姓名</p>
					<p style="float: left;margin-left: 45px;">
					    <input type="text" class="shuru" v-model="suername" />
					</p>
				</div>
				
				<!-- <div class="cyds-ls" style="margin-top: 30px;width: 100%;height: 0.7rem;margin-left: 0.6rem;">
					<p style="font-size: 25px;float: left;">学号</p>
					<p style="float: left;margin-left: 45px;">
					    <input type="text" class="shuru" v-model="xuehao" />
					</p>
				</div> -->
				
				<div class="cyds-ls" style="margin-top: 40px;width: 100%;height: 0.7rem;margin-left: 0.6rem;">
					<p style="font-size: 25px;float: left;">手机号</p>
					<p style="float: left;margin-left: 20px;">
					    <input type="text" class="shuru" v-model="sjhaoma" />
					</p>
				</div>
				<div class="cyds-ls" style="margin-top: 40px;width: 100%;height: 0.7rem;margin-left: 0.6rem;">
					<p style="font-size: 25px;float: left;">验证码</p>
					<p style="float: left;margin-left: 20px;">
					    <input type="text" class="shuruyzm" v-model="yanzhengma" />
					</p>
					<p @click="hqyzm" class="yzmhq" style="float: left;margin-left: 6px;">
						<span v-show="yzmshow" style="font-size: 14px;">获取验证码</span>
						<span v-show="yzmfalse" style="font-size: 14px;">{{djsyzm}}</span>
						
					</p>
				</div>
				<div class="cyds-ls" style="margin-top: 15px;width: 100%;height: 0.7rem;margin-left: 0.6rem;">
					<p style="font-size: 15px;float: left;margin-left:2rem">
						<Checkbox v-model="pdztxz"></Checkbox>
						<span style="text-decoration:underline;" @click="instance('info')">同意用户协议</span>
					</p>
				</div>

				<div @click="tijiao" class="cyds-ls" style="margin-top: 5px;width: 100%;height: 0.7rem;text-align: center;">
					<img style="width: 4rem;height: 1rem;" src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/cyds/tijiao.png" />
				</div>
				
			</div>
			
			
			
			
			
			
		</div>
	</div>
</template>

<script>
	import layercss from "../../css/layer.css"
	import layerjs from "../../js/layer.js"
	
	var furl = 'http://www.ntyouxuan.com/';
	var user = localStorage.getItem("nt_user");
	var API_URL = "http://api.ntyouxuan.com/";
	export default{
		name:"cyds",
		data () {
			return{
				ind:0,
				seachshow:true,
				seachStuta: true,
				seachinput: false,
				arealist:[],
				seachvalue:'',
				seachrmshow:false,
				wxdata:{
					'appid':'',
					'timestamp':'',
					'wxnonceStr':'',
					'wxShal':'',
					'title':'',
					'title_desc':'',
					'link':'',
					'img_url':'', 
				},
				aurl:'',
				yzmshow: true,
				yzmfalse:false,
				djsyzm: "",
				tuandui:'',
				xuexiao:'',
				suername:'',
				sjhaoma:'',
				xuehao:'',
				yanzhengma:'',
				pdztxz:'false'
			}
		},
		methods:{
			isWeiXin() {
		      let ua = window.navigator.userAgent.toLowerCase();
		      //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
		      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		      return true;
		      } else {
		      return false;
		      }
		    },
		    seachbtn: function () {
		      var self = this
		      var b = 0
		      for (var i = 151; i > 20; i--) {
		        (function (i) {
		          var a = i
		          setTimeout(function () {
		            $('.seachimg img').css('margin-left', a / 100 + 'rem')
		            if (i <= 21) {
		              self.seachshow = false
		              self.seachinput = true
		              self.seachrmshow = true
		              setTimeout(function () {
		                document.getElementById('seach').focus()
		              }, 100)
		              self.seachStuta = false
		            }
		          }, 1 * b)
		          b++
		        })(i)
		      }
		    },
		    instance (type) {
                const title = '用户协议';
                const content = '<p>用户协议用户协议用户协议用户协议用户协议用户协议</p>';
                switch (type) {
                    case 'info':
                        this.$Modal.info({
                            title: title,
                            content: content
                        });
                        break;                
                }
				console.log("hhh");
            },
		    seachremove: function () {
			// 当点击搜索时的动画
		      this.seachinput = false
		      var self = this
		      self.seachrmshow = false
		      setTimeout(function () {
		        self.seachshow = true
		        $('.seachimg img').css('margin-left', 151 / 100 + 'rem')
		        self.seachStuta = true;
		      }, 100)
		    },
		    seachsend:function(){
		    	var self=this;
		    	localStorage.setItem("nt_keyword",self.seachvalue);
		    	this.$router.push({path:'/seachall'});
		    },
			zhuye: function() {
				window.location.href = 'http://www.ntyouxuan.com/newnt/#/';
			},
			seachsend:function(){
		    	var self=this;
		    	localStorage.setItem("nt_keyword",self.seachvalue);
		    	this.$router.push({path:'/seachall'});
		    },
			seachsendtow:function(data){
		  		localStorage.setItem("nt_keyword",data);
		  		this.seachremove();
		    	var self=this;
		    	self.seachrmshow=false;
				  setTimeout(function () {
				  	self.$router.push({path:'/seachall'});
				  }, 150);
		  	},
		  	hqyzm: function() {
				var self = this;
				
				if (self.sjhaoma.length!=11) {
					layer.open({
				    	content:"手机号错误"
				    	,skin: 'msg'
				    	,time: 2 //2秒后自动关闭
				  	});
				  	return;
				}
				
				
				this.yzmshow = false;
				this.yzmfalse = true;
				self.djsyzm = '60秒后重新发送';
				for(var i = 60; i > 0; i--) {
					(function(i) {
						var a = i;
						var b = 60;
						setTimeout(function() {
							self.djsyzm = b - a + '秒后重新发送';
							if(a == 60) {
								self.yzmfalse = false;
								self.yzmshow = true;
							}
						}, i * 1000);
					})(i);
				};
			 	$.ajax({
					type: "post",
					url: API_URL + "base/login/get_reg_code.json",
					dataType: 'json',
					data:{
						'mobile':self.sjhaoma
					},
					success: function(res) {
						if (res.success==false) {
						  	layer.open({
						    	content:res.errorMsg
						    	,skin: 'msg'
						    	,time: 2 //2秒后自动关闭
						  	});
						  	self.yzmfalse = false;
							self.yzmshow = true;
						}
					}
				});
				
				
				
			},
			tijiao:function(){
				var self = this;
				if(self.pdztxz=false){
					layer.open({
				    	content:"未同意用户协议"
				    	,skin: 'msg'
				    	,time: 2 //2秒后自动关闭
					});

				}else{ 
					$.ajax({
						type: "post",
						url: API_URL + "activity/login/wechat_activity_reg.json",
						dataType: 'json',
						data:{
							'mobile':self.sjhaoma,
							'school':self.xuexiao,
							'real_name':self.suername,
							'school_number':self.xuehao,
							'mobile_code':self.yanzhengma
						},
						success: function(res) {
							if (res.success) {
								layer.open({
									content: res.errorMsg
									,btn: '确定'
									,function(){
										
									}
								});
							}else{
								layer.open({
									content:res.errorMsg
									,skin: 'msg'
									,time: 2 //2秒后自动关闭
								});
							}
							
						}
					});

				}


				
			}
		},
		mounted:function(){
			
		    var self=this;
		 	$.ajax({
				type: "get",
				url: furl + "index.php?app=ajax&act=new_message",
				dataType: 'json',
				success: function(res) {
					self.xiaoxitx=res.retval.new_message;
					if(self.xiaoxitx == 0){
						$("#xmessage").css("display","none")
					}
					console.log(self.xiaoxitx);
				}
			});
			
			
			
		}
	}
</script>

<style>
	.cyds{
		width: 100%;
		height: auto;
		margin-top: 0.9rem;
		overflow: hidden;
	}
	.cyds-top{
		width: 100%;
		height: 3.8rem;
		background-image: url(http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/cyds/dasai_1.png);
		background-size: 100% 100%;
	}
	.cyds-nr{
		width: 100%;
		height: 9.54rem;
		background-image: url(http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/cyds/dasai_2.png);
		background-size: 100% 100%;
		overflow: hidden;
	}
	.shuru{
		width: 4rem;
		height: 0.83rem;
		border: 3px solid #000000;
		font-size: 0.5rem;
		position: relative;
		top: -0.15rem;
	}
	.shuruyzm{
		width: 1.7rem;
		height: 0.83rem;
		border: 3px solid #000000;
		font-size: 0.5rem;
		position: relative;
		top: -0.15rem;
	}
	.yzmhq{
		width: 2.4rem;
		height: 0.83rem;
		background-image: url(http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/cyds/yanzhengm.png);
		background-size: 100% 100%;
		margin-top: -0.1rem;
		line-height: 0.1rem;
		text-align: center;
		font-weight: bold;
	}
</style>